<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    @include('bend/common/js')

    <style>
        body {
            background-color: #fff;
        }
    </style>
</head>

<body>

<form id="lay-form" method="post" enctype="">
    <div class="layui-form" style="padding: 20px 30px 0 0;">

    {!! $formHtml !!}

    <!---  --->
        <!--- <div class="layui-layer-btn layui-layer-btn-">
            <a class="layui-layer-btn0">确定</a>
            <a class="layui-layer-btn1">取消</a>
        </div> --->
    </div>
</form>


<script>
    // 显示表单
    layui.use('form', function(){
        var form = layui.form;
    });

    // 搜索
    $(".form-submit").on('click', function () {
        var formObj = $("#lay-form");

        formObj.action = "/bend/student/on-add"; //发送请求的路径
        formObj.method = "post";  //表单请求的方式
        formObj.attr('action', "/bend/student/on-add")

        //如果不设置上面的两个参数，默认提交触发该事件的表单
        formObj.submit();  //表单提交

        return false;
    })

    // 编辑器
    /*ue = UE.getEditor('content',{
        serverUrl :"{:url('/innerend/deal/qiniu')}"
    });*/


    // 删除图片
    $("#delThumb").on("click", function () {
        $("#thumb").attr("src", "/static/upfile.png");
        $("#thumb_image").val("");
        $("#delThumb").hide();
    });

    // 提交表单
    function submitForm(index) {
        //请求url
        //let formUrl = "{:url('/backend/'.$controller.'/on-'.($action=='add'?'add':'edit'))}";
        let formUrl = "{{$formUrl}}";
        let formData = $('#lay-form').serialize(); // 序列化表单数据


        //layer.close(1);
        //layer.close(index);

        $.ajax({
            type: "post",  //提交方式
            dataType: "json", //数据类型
            url: formUrl, //请求url
            data: formData,
            headers: {U4TIRP87hGoJhcyM: 'mZwTzXgOawVV1GJJ'},
            success: function (ret) { //提交成功的回调函数
                if (ret.code == 200) {
                    layer.msg(ret.msg, {icon: 6, time: 2000});
                    setTimeout(function () {
                        // 关闭弹出框口
                        var index = parent.layer.getFrameIndex(window.name);
                        if (index) {
                            // 关闭最外层 刷新父级
                            parent.location.reload();
                            parent.layer.close(index);
                        } else {
                            window.location.href = '{{$init_url}}';
                            console.log('跳转到：{{$init_url}}')
                        }
                    }, 2000);
                } else {
                    layer.msg(ret.msg, {icon: 0, time: 2000});
                }
            }
        })

    }

    // 搜索（第三版本）
    function searchList(url, obj, field = 'person_id', show_id = 'id', show_label = 'username') {
        var keyword = $(obj).val();
        if (keyword == "") return;
        $.ajax({
            beforeSend: function () {
                //layerIdx=layer.load();
            },
            type: "POST",
            async: false,
            dataType: "json",
            url: url,
            data: {
                keyword: keyword,
                r: Math.random()
            },
            error: function (XmlHttpRequest, textStatus, errorThrown) {

            },
            success: function (ret) {
                if (ret.code == 200) {
                    var html = '';
                    for (var i = 0; i < ret.data.length; i++) {
                        html += '<span onclick="selectAjax(this, \'' + field + '\')" data-id="' + ret.data[i][show_id] + '">' + HTMLEncode(ret.data[i][show_label]) + '</span><br/>';
                    }
                    // search_field_List
                    $("#search_" + field + "_List").html(html);
                    $("#search_" + field + "_List").show();
                } else {
                    $("#search_" + field + "_List").html('');
                    $("#search_" + field + "_List").hide();
                }
            },
            complete: function () {
                //layer.close(layerIdx);
            }
        });
    }

    // 搜索：所有的搜索都可以调用的
    function ajaxSearch(url, obj, field = 'uid', id = 'id', show = 'uid') {
        var keyword = $(obj).val();
        if (keyword == "") return;
        $.ajax({
            beforeSend: function () {
                //layerIdx=layer.load();
            },
            type: "POST",
            async: false,
            dataType: "json",
            url: url,
            data: {
                keyword: keyword,
                r: Math.random()
            },
            error: function (XmlHttpRequest, textStatus, errorThrown) {

            },
            success: function (ret) {
                if (ret.code == 200) {
                    var html = '';
                    for (var i = 0; i < ret.data.length; i++) {
                        html += '<span onclick="selectAjax(this, \'' + field + '\')" data-id="' + ret.data[i][id] + '">';
                        html += HTMLEncode(ret.data[i][show]) + '(' + id + ':' + ret.data[i][id] + ')';
                        html += '</span><br/>';
                    }
                    // search_field_List
                    $("#search_" + field + "_List").html(html);
                    $("#search_" + field + "_List").show();
                } else {
                    $("#search_" + field + "_List").html('');
                    $("#search_" + field + "_List").hide();
                }
            },
            complete: function () {
                //layer.close(layerIdx);
            }
        });
    }

    // 搜索的展示
    function selectAjax(obj, field) {
        var fieldID = $(obj).attr('data-id');
        var fieldName = $(obj).text();
        //$("#sUser").val(userName);
        // hide_field_ID
        // show_field_ID
        console.log(obj)
        console.log(fieldID)
        console.log(fieldName)

        // 如果是单选择
        $("#hide_" + field + "_ID").val(fieldID);
        $("#show_" + field + "_ID").html(fieldName);
        //$("#show_" + field + "_ID").html(field + "：" + fieldID);

        // 如果是多选
        var id_field_array = $("#" + field + "").val();
        if (id_field_array) {
            let has = (id_field_array.indexOf(fieldID) > -1)
            if (!has) {
                var html = '<span class="spanList" data-id="' + fieldID + '">' + fieldName + '&nbsp;<a href="javascript:;" onclick="searchRemove(this,\'' + field + '\')"> 删</a></span>&nbsp;&nbsp;';
                $("#show_" + field + "_list").append(html);
                searchSelect(field);
            }
        }


        $("#search_" + field + "_List").html('');
        $("#search_" + field + "_List").hide();
    }

    // 搜索选择的内容
    function searchSelect(field) {
        var id_field_array = [];
        $("#search_" + field + "_List").parent().find(".spanList").each(function () {
            id_field_array.push($(this).attr('data-id'));
        })
        console.log(field, id_field_array)
        $("#" + field + "").val(JSON.stringify(id_field_array));
    }

    // 搜索选择的内容的删除
    function searchRemove(obj, field) {
        $(obj).parent().remove();
        searchSelect(field);
    }


    function HTMLEncode(html) {
        var temp = document.createElement("div");
        (temp.textContent != null) ? (temp.textContent = html) : (temp.innerText = html);
        var output = temp.innerHTML;
        temp = null;
        return output;
    }

</script>
</body>
</html>
